.SetMars3dMap {
    width: 100%;
    height: 100%;
    padding: 16px;

    &.SetMars3dMapA01 {
        .ant-tabs {
            height: 100%;

            .ant-tabs-content {
                width: 100%;
                height: 100%;
                overflow-y: scroll;
            }
        }
    }

    &.SetMars3dMapA03 {
        height: 100%;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;

        &>.List {
            flex: 1;
            width: 100%;
            margin-bottom: 16px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                display: none;
            }

            &>.CameraCard {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: rgba(0, 0, 0, 0.85);
                border-radius: 8px;
                margin-bottom: 16px;
                padding: 16px;
                user-select: none;
                cursor: pointer;
                position: relative;
                z-index: 1;
                overflow: hidden;

                &:hover {
                    &>.CameraOptions {
                        bottom: 16px;
                        opacity: 1;
                    }
                }

                &>.number {
                    &>div {
                        color: white;
                        font-size: 20px;
                        font-family: PingFang;

                        &>span {
                            font-family: DIN;
                        }
                    }
                }

                &>.CameraBanner {
                    height: 160px;
                    width: 160px;
                    position: relative;
                    transition: left 0.3s linear;
                    background: url("");
                    background-size: cover;
                    background-position: left;
                    bottom: 0px;
                    border-radius: 50%;
                    animation: earthRotate 30s linear 0s infinite;
                    box-shadow: 0px 0 20px RGBA(255, 255, 255, 0.2), -5px 0px 8px #c3f4ff inset,
                        15px 2px 25px #000 inset, -24px -2px 34px #c3f4ff99 inset,
                        250px 0px 44px #00000066 inset, 150px 0px 38px #000000aa inset;

                }

                &>.CameraName {
                    position: absolute;
                    right: 8px;
                    top: 8px;
                    padding: 4px 8px;
                    font-size: 16px;
                    z-index: 2;
                    background: rgba(255, 255, 255, 0.35);
                    backdrop-filter: blur(8px);
                    border-radius: 8px;

                    &>span {
                        font-family: PingFang;
                        font-weight: 600;
                        font-size: 16px;
                        color: #FFFFFF;
                        filter: drop-shadow(1px 1px 2px #262626);

                        &.active {
                            color: #52c41a;
                        }
                    }

                }

                &>.CameraOptions {
                    position: absolute;
                    right: 16px;
                    bottom: -200px;
                    width: 160px;
                    height: 160px;
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    opacity: 0.2;
                    transition: all 0.35s;

                    &>button {
                        margin: 4px;
                        font-size: 20px;
                        font-family: ShuHeiTi;
                        // filter: drop-shadow(0px 0px 1px #ffffff);

                    }
                }

                @keyframes earthRotate {
                    0% {
                        background-position: 0 0;
                    }

                    100% {
                        background-position: 400px 0;
                    }
                }
            }
        }

        &>.Btn {
            width: 100%;
        }
    }

    &.SetMars3dMapA04 {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &>.TreeList {
            flex: 1;
            width: 100%;
            overflow: hidden;
            margin-bottom: 8px;

            .ant-tree {
                padding: 8px;
                height: 100%;
                overflow-y: scroll;

                &::-webkit-scrollbar {
                    display: none;
                }

                // background: transparent;
            }

            .TreeList__item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                &>.TreeItem__title {
                    flex: 1;

                    &>div:first-child {
                        font-family: MicrosoftYaHei;
                        font-size: 12px;
                        color: #444444;
                    }

                    &>div:last-child {
                        font-family: PingFang;
                        font-weight: 400;
                        font-size: 12px;
                        color: #262626;
                    }
                }

                &>.TreeItem__options {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    &>span {
                        margin: 0 8px;
                        font-size: 12px;
                        color: #1677ff;
                    }
                }

            }

        }

        &>.Button {
            height: 40px;

            button {
                width: 240px;
                margin: 0 8px;
            }
        }
    }
}

.SetMars3dMapA03__Input {
    width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &>input {
        margin-bottom: 16px;
        font-size: 20px;
    }
}

.SetMars3dMapA04__Drawer {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

}